<template>
  <div>
    <el-dialog :visible.sync="dialogFile" width="80%" top="48px" @close="close" class="dialog" append-to-body
               :close-on-click-modal="false" :close-on-press-escape='false'>
      <span slot="title" class="title">文件选择</span>
      <el-container style="background-color:#fff; height:100%; overflow:auto">
        <el-header class="file_header">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="float:left">
            <el-breadcrumb-item v-for="(item,index) in headerData" :key="index">
              {{item}}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <span></span>
          <div style="float:right" class="search">
            <el-input v-model="search" size="small" style="width:200px"
                      @keyup.enter.native='searchFile' placeholder="请输入内容">
              <i class="el-icon-search" slot="append" style="cursor: pointer;" @click="searchFile"></i>
            </el-input>
          </div>
        </el-header>
        <el-container style="position:relative; overflow:auto;height: 100%">
          <el-aside style="width: 200px" class="aside">
            <div style="background:white">
              <el-tree
                :data="fileData"
                highlight-current
                :props="defaultProps"
                draggable
                accordion
                node-key="id"
                :expand-on-click-node="false"
                ref="tree"
                @node-click="nodeClick">
                <span slot-scope="{ node, data }" :class="{'disItem':data.fileExt !== ''}">
                   <a href="javascript:;" v-if="data.pid != 0">
             <img v-if="!data.isfile" :src="treeImg"/>
             <img v-else class="active" :src="treeImgZ"/>
          </a>
          <a href="javascript:;" v-else>
             <img v-if="node.label == '公司目录'"
                  :src="company" style="height: 18px;vertical-align: middle" />
            <img  v-else-if="node.label == '自建目录'"
                  :src="oneself" style="height: 18px;vertical-align: middle"/>
          </a>
            <span onselectstart="return false" class="label">{{node.label}}</span>
<!--                  <img :src="company" style="height: 16px;vertical-align: middle"-->
<!--                       v-if="data.pid == 0 && node.label == '公司目录'"/>-->
<!--                  <img :src="oneself" style="height: 16px;vertical-align: middle"-->
<!--                       v-if="data.pid == 0 && node.label == '自建目录'"/>-->
<!--                  <img :src="treeImg" style="height: 46px;vertical-align: middle" v-if="data.pid != 0"/>-->
<!--                  <span class="label">{{node.label}}</span>-->
                </span>
              </el-tree>
            </div>
          </el-aside>
          <el-main>
            <div class="content_main">
              <div class="iconList">
                <span>可选数量：{{fileArr.length}}/{{maxNum}}</span>
                <el-row :gutter="20">
                  <el-col :span="3" v-for="(item, index) in showData" :key="index" v-if="index > 0"
                          style="padding-top: 5px">
                    <div :class="{'active_box': active==item.id}" :ref="item.id" :value="item.value"
                         :alt="item.parentDir" :type="item.fileExt" style="height:145px">
                      <div class="grid-content" @dblclick="changeData(item)">
                        <div class="rightullidiv"
                             v-if="item.fileExt.toLowerCase() == 'mp4' || item.fileExt.toLowerCase() == 'ogg'
                             || item.fileExt.toLowerCase() == 'webm' || item.fileExt.toLowerCase() == 'jpg' || item.fileExt.toLowerCase() == 'jpeg'
                             || item.fileExt.toLowerCase() == 'png' || item.fileExt.toLowerCase() == 'gif'">
                          <img :src="item.previewUrl !== '' ? item.previewUrl : defaultPreviewUrl" class="rightulliimg"
                               v-if="item.fileExt.toLowerCase() == 'mp4' || item.fileExt.toLowerCase() == 'ogg'
                               || item.fileExt.toLowerCase() == 'webm'"/>

                          <img :src="item.url" class="rightulliimg"
                               v-if="item.fileExt.toLowerCase() == 'jpg' || item.fileExt.toLowerCase() == 'jpeg'
                               || item.fileExt.toLowerCase() == 'png' || item.fileExt.toLowerCase() == 'gif'"/>
                        </div>
                        <div v-else>
                          <svg class="icon" aria-hidden="true" v-if="item.fileExt == ''">
                            <use xlink:href="#icon-folder" class="svg"></use>
                          </svg>
                          <svg class="icon" aria-hidden="true" v-if="item.fileExt !== ''">
                            <use :xlink:href="'#icon-' + item.icon"></use>
                          </svg>
                        </div>
                        <div class="file-name">
                          <label v-if="mold.includes(item.fileExt)">
                            <input type="checkbox" style="height:1px;width:1px;display:none">
                            <span class="erp-checkbox-list" @click.stop="checkboxList($event,item)"
                                  :class="checkboxarr.indexOf(item.id) > -1 ? 'checkbox_active' : ''"></span>
                          </label>
                          <p class="folderName" :title="item.folderName">{{item.folderName}}</p>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
      <div slot="footer" class="dialog-footer" style="text-align: left;">
        <div style="width: 100%">
          <el-button type="primary" @click="submit" size="small" style="margin-right: 20px">选 定</el-button>
          <el-button size="small" @click="close">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {getTree, getTabList, searchFile} from '@/api/file'
    import {getTreeEnd} from '@/util/util'
    export default {
        name: "indexElse",
        props: {
            appName: {
                type: String
            }
        },
        data() {
            return {
                accept: '',
                defaultPreviewUrl: 'http://zhilubt.oss-cn-hangzhou.aliyuncs.com/ERPSAAS/%E6%B5%99%E6%B1%9F%E7%9B%B4%E8%B7%AF%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80/Test/imges/2020/04/20/big/09275/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200420150921.png',
                company: './img/file/company.png',
                oneself: './img/file/oneself.png',
                treeImg: './img/icon/tree.png',
                treeImgZ: './img/icon/treeZ.png',
                dialogFile: false,
                headerData: [],
                fileData: [],
                search: '',
                defaultProps: {
                    children: 'children',
                    label: 'folderName'
                },
                mold: [],
                checkboxarr: [],
                showData: [],
                fileArr: [],
                iconData: ['dotm', 'avi', 'pptx', 'wma', 'xlsx', 'ppt', 'doc', 'folder', 'mp3', 'zip', 'ogg', 'txt', 'exe', 'psd', 'cad', 'img', 'pdf', 'docx', 'rar', 'webm', 'mp4', 'xls', 'dotx'],
                headervalue: '',
                active: '',
                maxNum: 0
            }
        },
        watch: {
            fileArr(value) {
                if (value.length > this.maxNum) {
                    this.$message({
                        type: "success",
                        message: '已超出可选择上限'
                    })
                }
            }
        },
        methods: {
            init(param) {
                // 初始化
                /** 初始化打开弹窗，获取左侧，当前页数据 **/
                this.accept = param.accept;
                this.maxNum = param.maxNum;
                this.mold = this.accept.split(',');
                this.dialogFile = true;
                getTree().then((res) => {
                    this.fileData = res.data.data
                    getTreeEnd(this.fileData, 'folderName')
                    getTabList('自建目录/').then((res) => {
                        if (res.data.success) {
                            res.data.data.forEach((value) => {
                                value.size = value.attributes.file_size
                                if (this.iconData.includes(value.fileExt)) {
                                    value.icon = value.fileExt
                                } else {
                                    value.icon = 'other'
                                }
                            })
                            this.showData = res.data.data
                            this.nowData = res.data.data[0]
                        }
                    })
                })
            },
            close() {
                this.dialogFile = false
            },
            searchFile() {
                searchFile(this.search, this.nowData.value).then((res) => {
                    this.nowData = res.data.data[0]
                    res.data.data.forEach((value) => {
                        value.size = value.attributes.file_size
                        if (this.iconData.includes(value.fileExt)) {
                            value.icon = value.fileExt
                        } else {
                            value.icon = 'other'
                        }
                    })
                    this.showData = res.data.data
                })
            },
            nodeClick(value) {
                getTabList(value.value).then((res) => {
                    if (res.data.success) {
                        this.nowData = res.data.data[0]
                        res.data.data.forEach((value) => {
                            value.size = value.attributes.file_size
                            if (this.iconData.includes(value.fileExt)) {
                                value.icon = value.fileExt
                            } else {
                                value.icon = 'other'
                            }
                        })
                        this.showData = res.data.data
                    }
                })
                // 点击变化头部面包屑
                this.headervalue = value.value
                let arr = value.value.split('/')
                this.headerData = arr.filter(d => d) // filter 过滤空格
            },
            checkboxList(event, item) { // checkbox 选中
                if (this.mold.includes(item.fileExt)) {
                    let arr = []
                    this.fileArr.forEach(value => {
                        arr.push(value.id)
                    })
                    if (arr.indexOf(item.id) > -1) {
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == item.id) {
                                this.fileArr.splice(i, 1)
                                this.checkboxarr.splice(i, 1)
                            }
                        }
                    } else {
                        if (this.checkboxarr.length < this.maxNum) {
                            const url = item.url+(item.url.indexOf('?')!=-1?'&':'?') +'type='+new Date().getTime();
                            this.fileArr.push({
                                previewUrl:item.previewUrl,
                                fileName: item.folderName,
                                fileSize: item.attributes.fileSize,
                                fileUrl: url,
                                id: item.id
                            })
                            this.checkboxarr.push(item.id)
                        }
                    }
                }
            },
            changeData(item) {
                if (item.fileExt == '') {
                    this.headervalue = item.value
                    let arr = item.value.split('/')
                    this.headerData = arr.filter(d => d)

                    getTabList(item.value).then((res) => {
                        if (res.data.success) {
                            res.data.data.forEach((value) => {
                                value.size = value.attributes.fileSize
                                if (this.iconData.includes(value.fileExt)) {
                                    value.icon = value.fileExt
                                } else {
                                    value.icon = 'other'
                                }
                            })
                            this.showData = res.data.data
                            this.nowData = res.data.data[0]

                            setTimeout(() => {
                                this.$refs.tree.setCurrentKey(res.data.data[0].id) // 设置高亮
                                this.idArr = []
                                this.idArr.push(res.data.data[0].id)
                            }, 500) // 直接设置不生效，需要设置延迟
                        }
                    })
                }
            },
            submit() {
                const type = this.accept.indexOf('png') != -1;
                this.$emit('setFile', type, this.fileArr)
                this.fileArr = []
                this.checkboxarr = []
                this.dialogFile = false
            },
            removeItem(index) {
                /** 删除选中 **/
                this.fileArr.splice(index, 1)
                this.checkboxarr.splice(index, 1)
            }
        }
    }
</script>

<style lang="scss">
  .file .el-dialog {
    height: 80%;
    overflow-y: hidden
  }

  .file .el-tree {
    min-height: 100%;
  }

  .file .el-dialog__body {
    height: 80%;
  }

  .dialog {
    .el-dialog {
      height: 100%;
    }

    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      height: calc(100% - 51px);
    }
  }
</style>


<style lang="scss" scoped>
  .el-tree{
    img{
      height: 46px;
      vertical-align: middle
    }
    img.active{
      height: 24px;
      vertical-align: top
    }
  }
  .search {
    margin-right: 20px;
  }

  .label {
    margin-left: 5px;
  }

  .rightullidiv {
    width: 6.4em;
    height: 5em;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;

    .rightulliimg {
      max-width: 6.4em;
      max-height: 5em;
    }
  }

  .icon_active {
    background-color: #409EFF;
  }

  .file_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fdfdfd;
    border-bottom: 1px solid #ddd;
    height: 45px !important;
  }

  .btn_box {
    background-color: white;
    border: 1px solid #ccc;
    margin-left: 20px;
    height: 32px;
    // width:64px;
    box-sizing: border-box;
  }

  .btns {
    width: 32px;
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    float: left;
    cursor: pointer;
  }

  .btns:hover {
    background-color: #e6e6e6
  }

  .icon_active {
    background-color: #e6e6e6
  }

  .content_main {
    height: calc(100% - 60px);
    margin: 10px;
    background-color: #F5F5F5;
    overflow: auto;
  }

  .aside_header {
    height: 34px;
    line-height: 34px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }

  .aside {
    border: 1px solid #ddd;
    height: 100%;
    width: 100%;
    overflow: auto;
    background: white
  }

  .operation {
    margin: 0 5px
  }

  .retract, .operation {
    cursor: pointer;
    font-size: 16px !important;
  }

  .grid-content {
    height: 140px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: space-around;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;

    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 3px;
    }
  }

  .file-name {
    width: 100%;
    display: flex;
  }

  .icon {
    font-size: 5em
  }

  .removeClass {
    height: 0;
  }

  .custom-tree-node {
    height: 26px;
  }

  .active_box {
    background-color: #cce8ff
  }

  .iconList {
    padding: 10px;
    box-sizing: border-box;
  }

  .move {
    position: absolute;
    background: #cce8ff;
    box-sizing: border-box;
  }

  .el-breadcrumb__item {
    cursor: pointer; // 鼠标点击
  }

  .title {
    font-weight: 600;
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
  }

  .erp-checkbox, .erp-checkbox-list {
    width: 11px;
    height: 11px;
    display: inline-block;
    position: relative;
    background-color: white;
    border: 2px solid #8C8C8C;
    border-radius: 3px;
    margin-top: 4px;
  }

  .erp-checkbox:after, .erp-checkbox-list:after {
    display: block;
    content: "";
    height: 4px;
    width: 8px;
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }

  .checkbox_active {
    background-color: #2A97F9;
    border-color: #2A97F9
  }

  .select_icon {
    font-size: 2em
  }

  .select {
    display: flex;
  }

  .upload-list__item {
    padding: 0 10px;
    width: 50%;
    display: flex;
    justify-content: space-between;
    cursor: auto
  }

  .file {
    display: inline-block
  }

  .avatar-uploader-icon {
    font-size: 5em;
    color: #8c939d;
  }

  .dialog-footer {
    position: absolute;
    bottom: 10px;
    left: 250px;
  }

  .folderName {
    user-select: none; // 防止文件名双击被选中蓝色
  }
</style>
